<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Foundation -->
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
<script src="js/vendor/custom.modernizr.js"></script>
<title>Tournoi</title>
</head>
<body class="antialiased">
	<jsp:include page="inc_menu.jsp"></jsp:include>
	<div class="row">
		<div class="large-9 large-centered columns">
			<div class="row">
				<div class="large-12 columns">
					<h1>Tournoi</h1>
					<hr />
				</div>
				<div class="large-11 large-centered columns">
					<c:if test="${fn:length(tours) > 0 }">
						<c:forEach var="tour" items="${tours }">
							<div class="row">
								<div class="large-12 columns">
									<h3>
										<c:if test="${tour.matchs.size() == 1 }">Finale</c:if>
										<c:if test="${tour.matchs.size() == 2 }">Demi-Finale</c:if>
										<c:if test="${tour.matchs.size() == 4 }">Quart-Finale</c:if>
										<c:if test="${tour.matchs.size() > 4 }">Tour n°${tour.numero }</c:if>
									</h3>
									<c:forEach var="match" items="${tour.matchs }" varStatus="loop">
										<div class="panel"
											${!loop.last ? 'style="margin-bottom: 0px; border-bottom: none;"':''}>
											<div class="row">
												<div class="large-2 columns">
													<c:choose>
														<c:when test="${match.etat == 'Prevu' }">
									Prévu
									</c:when>
														<c:when test="${match.etat == 'EnCours' }">
									En cours
									</c:when>
														<c:when test="${match.etat == 'Termine' }">
									Terminé
									</c:when>
													</c:choose>
													<c:set var="cupEquipe1" value=""></c:set>
													<c:set var="cupEquipe2" value=""></c:set>
													<c:if test="${ tour.matchs.size() == 1 && match.getEtat() == 'Termine' && match.getIdEquipeGagnante() == match.getEquipe1().getIdEquipe()}">
														<c:set var="cupEquipe1" value="<img src='img/cup32.png' style='margin-right: 10px;' />"></c:set>
													</c:if>
													<c:if test="${ tour.matchs.size() == 1 && match.getEtat() == 'Termine' && match.getIdEquipeGagnante() == match.getEquipe2().getIdEquipe()}">
														<c:set var="cupEquipe2" value="<img src='img/cup32.png' style='margin-left: 10px;' />"></c:set>
													</c:if>
												</div>
												<div class="large-3 columns" style="text-align: right;">
													<a data-tooltip class="has-tip" title="Voir cette équipe"
														href="#equipe${match.equipe1.idEquipe }">${cupEquipe1} ${match.equipe1.nom }</a>
												</div>
												<div class="large-2 columns" style="text-align: center;">
													<c:choose>
														<c:when test="${match.etat == 'Prevu'}">
											-
											</c:when>
														<c:otherwise>
															<!-- Calcul du score total -->
															<c:set var="idEquipe1" value="${match.equipe1.idEquipe }" />
															<c:set var="score1" value="0" />
															<c:set var="score2" value="0" />
															<c:forEach var="but" items="${match.buts }">
																<c:choose>
																	<c:when
																		test="${but.auteur.equipe.idEquipe == idEquipe1 }">
																		<c:set var="score1" value="${score1 + 1 }" />
																	</c:when>
																	<c:otherwise>
																		<c:set var="score2" value="${score2 + 1 }" />
																	</c:otherwise>
																</c:choose>
															</c:forEach>
															<c:if test="${ match.getIdEquipeGagnante() > -1 }">
																<c:set var="score1Color" value="${ match.getIdEquipeGagnante() == match.getEquipe1().getIdEquipe() ? 'color: green' : 'color: red' }" />
																<c:set var="score2Color" value="${ match.getIdEquipeGagnante() == match.getEquipe2().getIdEquipe() ? 'color: green' : 'color: red' }" />
															</c:if>
															<c:if test="${ match.getIdEquipeGagnante() == -1 }">
																<c:set var="score1Color" value="${ score1 == score2 ? 'color: black;' : (score1 > score2 ? 'color: green;' : 'color: red;') }" />
																<c:set var="score2Color" value="${ score1 == score2 ? 'color: black;' : (score2 > score1 ? 'color: green;' : 'color: red;') }" />
															</c:if>
															<!-- Fin -->
															<a data-tooltip class="has-tip" title="Détails du match"
																href="miniprojet?action=match&id=${match.idMatch }"><span style="${score1Color}">${score1 }</span> - <span style="${score2Color}">${score2 }</span></a>
														</c:otherwise>
													</c:choose>
												</div>
												<div class="large-5 columns" style="text-align: left;">
													<a data-tooltip class="has-tip" title="Voir cette équipe"
														href="#equipe${match.equipe2.idEquipe }">${match.equipe2.nom } ${cupEquipe2}</a>
												</div>
											</div>
										</div>
									</c:forEach>
								</div>
							</div>
						</c:forEach>
						<hr />
					</c:if>
					<div class="row">
						<div class="large-12 columns">
							<h3>&Eacute;quipes</h3>
							<c:choose>
								<c:when test="${fn:length(equipes) > 0 }">
									<div class="section-container accordion"
										data-section="accordion">
										<c:forEach var="equipe" items="${equipes }">
											<section>
											<p class="title" data-section-title>
												<a href="#" id="equipe${equipe.idEquipe }"
													onclick="loadEquipe(${equipe.idEquipe});">${equipe.nom }
												</a>
											</p>
											<div class="content" data-section-content>
												<div class="row" id="equipe${equipe.idEquipe }_empty">
													Chargement...</div>
											</div>
											</section>
										</c:forEach>
									</div>
								</c:when>
								<c:otherwise>
							Il n'y a aucune équipe inscrite.
							</c:otherwise>
							</c:choose>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script>
		document.write('<script src='
				+ ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery')
				+ '.js><\/script>');
	</script>

	<script src="js/foundation.min.js"></script>
	<script src="js/foundation/foundation.section.js"></script>
	<script>
		$(document).foundation();
		
		function createEquipe(data) {
			var str = '<div class="large-12 columns">' +
			'<div class="row"><div class="large-12 columns" style="text-align: center;">' +
			data.representant.nom + ' ' + data.representant.prenom +
			'</div></div>' +
			'<hr/>';
			str = str + '<div class="row">';
			var joueurs = data.joueurs;
			/* Première colonne */
			str = str + '<div class="large-6 columns">';
			for(var i = 0; i < Math.ceil(joueurs.length/2); i++) {
				str = str + '<div class="row"><div class="large-12 columns" style="text-align: center;">' +
				joueurs[i].nom + ' ' + joueurs[i].prenom +
				'</div></div>';
			}
			str = str + '</div>';
			/* Seconde colonne. */
			str = str + '<div class="large-6 columns">';
			for(var i = Math.ceil(joueurs.length/2); i < joueurs.length; i++) {
				str = str + '<div class="row"><div class="large-12 columns" style="text-align: center;">' +
				joueurs[i].nom + ' ' + joueurs[i].prenom +
				'</div></div>';
			}
			str = str + '</div>';
			str = str + '</div>';
			str = str + '</div>';
			'</div>';
			return str;
		}
		
		function loadEquipe(id) {
			$.ajax({
				dataType: "json",
				url: "miniprojet?action=equipe&id=" + id,
						success: function(data) {
				var e = $("#equipe" + id + "_empty");
				if(e.length) {
					e.attr("id", "equipe" + id + "_content");
					e.html(createEquipe(data));
				};
			},
			error: function(jqxhr, status, error) {
				alert(error);
			}
			});
		};
	</script>
</body>
</html>